Vue中关于ElementUI上传组件Upload的整理

2024-06-20 11:08| 来源: 网络整理| 查看: 265

Vue中关于ElementUI上传组件Upload的整理一、概要二、功能梳理1、Attribute2、Methods3、Slot 三、代码示例参考文档

一、概要

ElementUI为我们提供了上传组件Upload：（以下功能 ElementUI官网均有演示）

可以使用 drag 设置点击或者拖拽上传文件。可以通过 slot 自定义的上传按钮类型和文字提示。可以通过 limit 和 on-exceed 限制上传文件的个数和定义超出限制时的行为可以通过 before-remove 来阻止文件移除操作。可以通过 before-upload 限制用户上传的图片格式和大小。可以使用 list-type 属性来设置文件列表的样式。可以使用 scoped-slot 去设置缩略图模版。可以通过 on-change 钩子函数来对列表进行控制。可以使用 scoped-slot 去设置缩略图模版。二、功能梳理

要想学会一个组件怎么使用，首先要了解它的组成，一个组件的组成无非四种类型：属性（Attribute）、方法（Methods）、事件（Event）、插槽（Slot）。

1、Attribute 关于上传的一些请求属性参数说明类型默认值action请求地址（必选）String—name请求字段名Stringfileheaders请求头Object—data请求额外参数Object—with-credentials支持发送 cookie 凭证信息Booleanfalsehttp-request自定义上传Function— 关于上传的一些配置属性参数说明类型默认值accept接受上传的文件类型（thumbnail-mode 模式下此参数无效）String—multiple是否支持多选文件Boolean—limit最大允许上传个数Number—show-file-list是否显示已上传文件列表Booleantruefile-list上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]Array—[]list-type文件列表的类型（text/picture/picture-card）String—textdrag是否启用拖拽上传Booleanfalseauto-upload是否在选取文件后立即进行上传Booleantruedisabled是否禁用Booleantrue 关于上传的一些钩子属性参数说明类型默认值on-preview点击文件列表中已上传的文件时的钩子function(file)—before-remove删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)—on-remove文件列表移除文件时的钩子function(file, fileList)—before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。function(file)—on-progress文件上传时的钩子function(event, file, fileList)—on-success文件上传成功时的钩子function(response, file, fileList)—on-error文件上传失败时的钩子function(err, file, fileList)—on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用function(file, fileList)—on-exceed文件超出个数限制时的钩子function(files, fileList)— 2、Methods 方法说明参数clearFiles清空已上传的文件列表（该方法不支持在 before-upload 中调用）—abort取消上传请求（ file: fileList 中的 file 对象）submit手动上传文件列表— 3、Slot name说明trigger触发文件选择框的内容tip提示说明文字三、代码示例 template 点击上传触发文件选择框的内容提示说明文字（例如：只能上传jpg/png文件，且不超过500kb 实例方法 javascript export default { name: 'Demo', data() { return { action: '', // 请求地址 name: 'file', // 请求字段名 headers: {}, // 请求头 data: {}, // 请求额外参数 withCredentials: false, // 支持发送 cookie 凭证信息 accept: '', // 接受上传的文件类型 multiple: true, // 是否支持多选文件 limit: 3, // 最大允许上传个数 showFileList: true, // 是否显示已上传文件列表 fileList: [], // 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}] listType: 'text', // 文件列表的类型（text/picture/picture-card） drag: false, // 是否启用拖拽上传 autoUpload: true, // 是否在选取文件后立即进行上传 disabled: true // 是否禁用 } }, methods: { // 覆盖默认的上传行为 httpRequest() { // 可以自定义上传的实现 }, // 点击文件列表中已上传的文件时的钩子 handlePreview(file) { console.log(file) }, // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 beforeRemove(file, fileList) { console.log(file, fileList) return this.$confirm(`确定移除 ${file.name}？`) }, // 文件列表移除文件时的钩子 handleRemove(file, fileList) { console.log(file, fileList) }, // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 beforeUpload(file) { console.log(file) }, // 文件上传时的钩子 handleProgress(event, file, fileList) { console.log(event, file, fileList) }, // 文件上传成功时的钩子 handleSuccess(response, file, fileList) { console.log(response, file, fileList) this.$message.success('上传成功！') }, // 文件上传失败时的钩子 handleError(err, file, fileList) { console.log(err, file, fileList) this.$message.error('上传失败！') }, // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 handleChange(file, fileList) { console.log(file, fileList) }, // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`) }, // 实例方法 emitMethods() { // 清空已上传的文件列表（该方法不支持在 before-upload 中调用） this.$refs.upload.clearFiles() // 取消上传请求,参数：（ file: fileList 中的 file 对象） this.$refs.upload.abort() // 手动上传文件列表 this.$refs.upload.submit() } } } 参考文档 ElementUI官网：https://element.eleme.cn/#/zh-CN/component/upload

【本文地址】

公司简介

联系我们